<template>
    <MainSlot v-loading="loading">
        <template v-slot:searchForm>
            <SearchForm v-if="formItemList.length" :formItemList="formItemList" :unfoldFlag="unfoldFlag"
                @search="search" @isUnfold="(v) => { unfoldFlag = v }">
            </SearchForm>
        </template>
        <template v-slot:btn>
            <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
        </template>
        <template v-slot:table>
            <TableData :config="table_config" :tableThead="tableThead" :dataList="dataList" :loading="loading"
                @selection-change="selectionChange">
                <template v-slot:img="{ row }">
                    <el-image v-if="row.img" class="elImg" :src="row.img" :preview-src-list="[row.img]">
                    </el-image>
                </template>
                <template v-slot:displayLocation="{ row }">
                    {{ row.displayLocation == 'LEFT' ? '左侧' : '右侧' }}
                </template>
                <template v-slot:status="{ row }">
                    <span class="success">{{ row.status ? '显示' : '隐藏' }}</span>
                </template>
                <template v-slot:releaseStatus="{ row }">
                    <el-button :type="row.status ? 'danger' : 'primary'" plain @click="release(row)">{{ row.status ?
        '隐藏' : '显示'
                        }}</el-button>
                </template>
            </TableData>
        </template>
        <template v-slot:pagination>
            <Pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"  :page="page" :size="size" :total="total">
            </Pagination>
        </template>
        <template v-slot:dialogModule>
            <AddEdit :title="'飘窗'" :articleList="articleList" :enumList="enumList" @closeDialog="closeDialog" :addEditFlag="addEditFlag"
                :dialogVisible="dialogVisible" :data="formData">
            </AddEdit>
        </template>
    </MainSlot>
</template>
<script>
import $baseUrl from '@/utils/baseURL';
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import bayWindow from "@/api/bayWindow";
import article from "@/api/article";
import enumApi from "@/api/enum";
import AddEdit from "./components/addEdit.vue";


export default {
    components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, AddEdit },
    data() {
        return {
            unfoldFlag: false,
            loading: false,
            dialogVisible: false,
            addEditFlag: 'add',
            selectList: [],
            formData: {},
            page: 1,size:10,
            total: 10,
            selectIndex: 0,
            searchFormData: {},
            btnList: ['add', 'delete'],
            dataList: [],
            tableThead: [
                { isShow: true, label: '标题', prop: 'title' },
                { isShow: true, label: '图片', slotName: 'img' },
                { isShow: true, label: '显示位置', slotName: 'displayLocation' },
                { isShow: true, label: '跳转类型', prop: 'jumpTypeStr' },
                { isShow: true, label: '文章地址', prop: 'url' },
                { isShow: true, label: '状态', slotName: 'status' },
                { isShow: true, label: '显示/隐藏', slotName: 'releaseStatus' },
            ],
            // 配置项
            table_config: {
                isCheckBox: true,

                isOperation: true,
                // 表格操作列
                operation: {
                    label: '操作',
                    width: '200',
                    cols: [
                        {
                            label: '编辑',
                            type: 'primary',
                            flag: 'edit',
                            handleRow: this.handleRow
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            flag: 'del',
                            handleRow: this.handleRow
                        }
                    ]
                },
            },
            enumList: [],
            articleList: [],
            formItemList: [
                {
                    label: '标题',
                    type: 'input',
                    param: 'title',
                    multiple: false,
                    isShow: true
                }
            ]
        }
    },
    mounted() {
        this.queryPageList();
        this.initData();
    },
    methods: {
        async initData() {
            let { data: articleList } = await article.queryList({});
            let { data: enumObj } = await enumApi.queryJumpType();
            this.enumList = [];
            for (let key in enumObj) {
                this.enumList.push({ value: key, text: enumObj[key] })
            }
            this.articleList = articleList || [];
        },
        //启停
        release(data) {
            this.$confirm('你确定继续此操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                bayWindow.release({ ...data, status: !data.status }).then(res => {
                    if (res.code == 0) {
                        this.queryPageList();
                        this.$message.success('操作成功')
                    } else {
                        this.$message.warning(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.warning('操作失败')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        delList(deleteList = [], key = 'bayWindowId') {
            let list = []
            deleteList.forEach(item => {
                list.push(item[key])
            })
            console.log(list)
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //删除
                bayWindow.delList(list).then(res => {
                    if (res.code == 0) {
                        this.queryPageList();
                        this.$message.success('删除成功')
                    } else {
                        this.$message.warning(res.msg || '删除失败')
                    }
                }).catch(err => {
                    this.$message.warning('删除失败')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        queryPageList() {
            let params = {
                page: this.page,
                size: this.size,
                condition: this.searchFormData
            }
            this.loading = true;
            //查询列表
            bayWindow.queryPageList({ ...params }).then(res => {
                this.loading = false;
                if (res.code == 0) {
                    let { list, total } = res.data;
                    this.dataList = list || [];
                    this.dataList = this.dataList.map(item => {
                        return {
                            ...item,
                            img: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.filesId}`
                        }
                    })
                    this.total = total || 0;
                    // this.$message.success(res.msg || '查询成功')
                } else {
                    this.$message.warning(res.msg || '查询失败')
                }
            }).catch(err => {
                this.loading = false;
                this.$message.warning('查询失败')
            })
        },
        search(data) {
            this.page = 1;
            this.searchFormData = { ...this.searchFormData, ...data };
            this.queryPageList();
        },
        handleSizeChange(size){
            this.size = size;
            this.queryPageList();
        },
        handleCurrentChange(page) {
            this.page = page;
            this.queryPageList();
        },
        // 操作方法
        handleRow(rowData, item) {
            if (item.flag == 'edit') {
                this.dialogVisible = true;
                this.formData = JSON.parse(JSON.stringify(rowData))
            } else if (item.flag == 'del') {
                this.delList([rowData]);
            }
            this.addEditFlag = item.flag
        },
        // 多选方法
        selectionChange(val) {
            this.selectList = val || []
        },
        //获取选中Btn
        getBtnEvent(flag) {
            console.log(flag)
            if (flag == 'add') {
                this.dialogVisible = true
            } else if (flag == 'delete') {
                if (this.selectList.length > 0) {
                    this.delList(this.selectList)
                } else {
                    this.$message.warning('请先选择表单数据项后再删除！')
                }
            }
            this.addEditFlag = flag
        },

        //关闭弹窗
        closeDialog() {
            this.dialogVisible = false;
            this.queryPageList();
        },
    }
};
</script>
<style lang="scss" scoped></style>